
<template>
  <div>
    <el-upload v-if="viewType=='form'||viewType=='edit'||viewType=='add'" ref="upload"
               class="upload-demo dis-in-b"
               action="#" :accept="accept" :multiple="multiple" :limit="limit" :file-list="successList" :show-file-list="false"
               :http-request="file=>requestFileFun(file)" :on-change="changeFile"
               :on-exceed="exceedFun"
    >

      <el-button :title="title" :type="type">
        <!-- <svg-icon v-if="icon=='up'" icon-class="fileUp" /> -->
        {{ title }}
      </el-button>

    </el-upload>
    <span v-if="msgTitle" class="fileTsTitle  m-rem-l-10">{{ msgTitle }}</span>
    <div v-if="showList">
      <!-- :style="viewType=='form'||viewType=='edit'||viewType=='add'?'margin-top:10px;':'margin-top:10px; clear: both;'" -->
      <div v-for="(item,index) in successList" :key="index" :class="[index===0?'m-rem-t-0':'m-rem-t-10',(viewType=='form'||viewType=='edit'||viewType=='add')?'':'clearfix']">
        <p class="bao_fileListP p-rem-b-10">
          <i class="el-icon-paperclip" style="margin-right:8px"></i>
          <!-- 是pageOffice -->
          <span v-if="pageOffice&&(processNewForm['officelook']||processNewForm['exportpdf']||processNewForm['pageofficetaohong']||processNewForm['pageofficeedit'])" class="bao_filesNamepl" :title="decodeURI(item.annexName)">
            <a class="bao_pageofficeTitle" :href="item.href" @click="clickPageOfficeFun(item, true,processNewForm)">{{ decodeURIComponent(item.annexName) }}</a>
          </span>
          <!-- 不是pageOffice -->
          <span v-else class="bao_filesNamepl" :title="decodeURI(item.annexName)">{{ decodeURI(item.annexName) }}</span>
          <!-- <i class="el-icon-view bao_filesBtn m-rem-l-20" @click="fileLook(item)"></i> -->
          <i class=" el-icon-download bao_filesBtn" @click="downLoadFileFun(item)"></i>
          <i v-if=" deleteBool " typeC="danger" class="el-icon-delete bao_filesBtn " @click="closeFilesFun(item)"></i>
        </p>
      </div>
    </div>
    <!-- 附件进度 -->
    <el-dialog title="附件进度" :visible.sync="filesProcessDialog" class="filesProcessDialog" :close-on-click-modal="false"
               :close-on-press-escape="false" :show-close="false" width="500px" :modal="false"
    >
      <div v-for="(item,keyIndex) in filesProcessList" :key="keyIndex" class="progressItem">
        <p class="progressItemTet">
          <i class="el-icon-paperclip" style="margin-right:8px"></i>
          <span class="bao_filesNamepl" :title="decodeURI(item.annexName)">{{ decodeURI(item.annexName) }}</span>
        </p>
        <el-progress :status="item.statusFiles" :percentage="item.percentageFiles"></el-progress>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="resetProcessFun">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadMixins } from '@/mixins/publicMixins/uploadMixins'
import { base64encode, toChinesNum } from '@/utils/commonUtils/HLUtils.js'
export default {
  mixins: [uploadMixins],
  props: {
    // 按钮title
    title: {
      type: String,
      default: ''
    },
    // 按钮格式
    type: {
      type: String

    },
    // 文件格式
    accept: {
      type: String

    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 需不需要超大附件
    large: {
      type: Boolean,
      default: false
    },
    // 图标
    icon: {
      type: String
    },
    // 是否可以删除
    deleteBool: {
      type: Boolean,
      default: true
    },
    showList: {
      type: Boolean,
      default: false
    },
    // 可上传的数量
    limit: {
      type: Number
    },

    // 是不是附件列表
    tablelist: {
      type: Boolean,
      default: false
    },
    // 按钮大小
    btnsize: {
      type: String,
      default: 'small'
    },
    // 父级成功的附件
    successList: {
      type: Array,
      default: function() {
        return []
      }
    },
    viewType: {
      type: String,
      default: 'form'
    }, // 页面type form/view
    pageOffice: {
      type: Boolean,
      default: false
    },
    msgTitle: {
      type: String,
      default: ''
    }, // 提示信息
    processNewForm: Array,
    dateTiem: {
      type: String
    }, // 有效期
    dateTiemName: {
      type: String
    } // 有效期文件名称
  },
  inject: {
    processProvide: {
      default: () => ({})
    }
  },
  data() {
    return {
      userName: this.$store.state.user.userInfo.username,
      userId: this.$store.state.user.userInfo.userId,
      filesProcessDialog: false, // 进度条弹框
      filesProcessList: [], // 进度条数据
      filesNum: 0, // 上传的数量
      successData: [] // 上传成功的附件
      // successList: []// 上传的附件
    }
  },

  computed: {
    user() {
      return this.$store.state.user
    }
  },
  created() {

  },
  methods: {
    fileLook(row) {
      // let deal='http://'
      // let newPath= row.annexPath.substr(7,row.annexPath.length)
      // let siteNum= newPath.indexOf('/')
      // let filePath= newPath.substr(siteNum,newPath.length)
      // let url=deal+'localhost:81'+filePath
      // console.log(url)
      // window.open(process.env.VUE_APP_FILES_PREVIEW+encodeURIComponent(base64encode('http://220.195.127.78:10000//material-device-system/fileId_0/menuId_/supervise/b9a01ba52d4343588ce61ed1870b5e5e.png')));
      window.open(process.env.VUE_APP_FILES_PREVIEW + encodeURIComponent(base64encode(row.annexPath)))
    },

    // 删除文件
    closeFilesFun(row) {
      if (row.editBool === true) {
        this.successList.forEach((element, index) => {
          if (element.downAnnexName === row.downAnnexName) {
            this.msgAlt('删除成功','success')
            // if (this.tablelist) {
            //   this.$emit('deleteFileTablelist', element, 'deleteAnnexIds')
            // } else {
            this.$emit('deleteFileList', element, 'deleteAnnexIds')
            // }
          }
        })
      } else {
        this.deleteFileFun(row, this.successList)
      }
    },

    // 限制上传数量
    exceedFun(files, fileList) {
      if (files.length > this.limit) {
        this.msgAlt('最多可上传' + toChinesNum(this.limit) + '个附件', 'error')
        return
      }
      if (Number(this.successList.length) + Number(files.length) > this.limit) {
        this.msgAlt('最多可上传' + toChinesNum(this.limit) + '个附件', 'error')
        return
      }
    },
    // pageOffice上传附件
    clickPageOfficeFun(item, officeType, processNewForm) {
      let newPath = item.filePath.replace('\\\\', '\/\/')
      newPath = newPath.replace('\\', '\/')
      newPath = newPath.replace('\\', '\/')
      // console.log(newPath)
      const that = this
      let dataNew = {}
      // word查看
      if (processNewForm['officelook'] || processNewForm['pageofficeedit']) {
        dataNew = {
          filePath: encodeURIComponent(newPath),
          fileId: item.id,
          userId: that.userId,
          editType: false
        }

        if (processNewForm['pageofficeedit']) {
          dataNew.editType = true
        }
        item.href = POBrowser.openWindowModeless(
          process.env.VUE_APP_PAGEOFFICE_API +
            '/word?fileId=' + item.id +
            '&userId=' + that.userId +
            '&editType=' + dataNew.editType,
          'width=1200px;height=800px;',
          JSON.stringify(dataNew)
        )
      }
      // pdf 查看
      // if(processNewForm['pageofficepdf']){
      //    item.href = POBrowser.openWindowModeless(
      //     process.env.VUE_APP_PAGEOFFICE_API +
      //       "/pdf?filePath=" +
      //       encodeURIComponent(newPath),
      //     "width=1200px;height=800px;"
      //   );
      // }
      if (processNewForm['pageofficetaohong']) {
        // item.href= POBrowser.openWindowModeless(process.env.VUE_APP_PAGEOFFICE_API +"/showTaoHongWord" , 'width=1200px;height=800px;')
        const data = {
          id: this.$route_query.id
        }
        getTaoHongStatus(data).then(res => {
          // 已套红查看
          if (res.data == true) {
            dataNew = {
              filePath: encodeURIComponent(newPath),
              fileId: item.id,
              userId: that.userId,
              editType: false
            }
            item.href = POBrowser.openWindowModeless(
              process.env.VUE_APP_PAGEOFFICE_API +
                  '/word?fileId=' + item.id +
                  '&userId=' + that.userId +
                   '&editType=' + dataNew.editType,
              'width=1200px;height=800px;',
              JSON.stringify(dataNew)
            )
          } else {
            dataNew = {
              filePath: encodeURIComponent(newPath),
              tempCode: 'temp2009',
              code: 'taohong_01',
              annexId: item.id
            }
            if (officeType == true) {
              dataNew.editType = true
            }
            item.href = POBrowser.openWindowModeless(
              process.env.VUE_APP_PAGEOFFICE_API + '/page/taoHong?tempCode=temp2009&code=taohong_01&annexId=' + item.id + '&businessId=' + this.$route_query.id, 'width=1200px;height=800px;',
              JSON.stringify(dataNew)
            )
          }
        })
      }
    }
  }
}
</script>

